import { PureComponent } from 'react';
export default class MiProgress extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {

    }
  }
  render() {
    let borderRadius = "1000px";
    let { is_gradient = 0, color_group = {}, node_list = [], list } = this.props;
    return (
      <div data-flex="dir:top" style={{ padding: "5px" }}>
        <div data-flex="dir:left box:last cross:center" style={{ margin: "20px 0" }}>
          <div style={{ background: "#ccc", height: "8px", position: "relative", borderRadius }}>
            <div style={{ width: "100%", height: "8px", borderRadius, background: "linear-gradient(to right, green 0%,yellow 80%,red 100%)" }} data-flex>
              <div style={{ width: "30%", background: "green", height: "100%", borderRadius: "1000px 0 0 1000px" }}></div>
              <div style={{ width: "30%", background: "red", height: "100%", borderRadius: "0 1000px 1000px 0" }}></div>
              {/* 灰色条 */}
              <div style={{ width: "40%", position: "absolute", height: "100%", left: "60%", background: "#ccc", borderRadius: "0 900px 900px 0" }}></div>
              {/* 当前进度点 */}
              <div style={{ width: "12px", height: "12px", position: "absolute", background: "#1890ff", borderRadius: "50%", left: "60%", top: "-2px", marginLeft: "-8px" }}></div>
            </div>
            <div data-flex="dir:top cross:center" style={{ position: "absolute", left: "20%", top: "-25px", transform: "translateX(-50%)" }}>
              <p style={{ whiteSpace: "nowrap", fontSize: "10px", color: "#ccc", height: "16px", lineHeight: "16px" }}>昨日电量</p>
              <p style={{ height: "15px", width: "3px", background: "#ccc", margin: "5px 0" }}></p>
              <p style={{ whiteSpace: "nowrap", fontSize: "10px", color: "#ccc", height: "16px", lineHeight: "16px" }}>1000kWh</p>
            </div>
            <div data-flex="dir:top cross:center" style={{ position: "absolute", left: "80%", top: "-25px", transform: "translateX(-50%)" }}>
              <p style={{ whiteSpace: "nowrap", fontSize: "10px", color: "#ccc", height: "16px", lineHeight: "16px" }}>今日电量</p>
              <p style={{ height: "15px", width: "3px", background: "#ccc", margin: "5px 0" }}></p>
              <p style={{ whiteSpace: "nowrap", fontSize: "10px", color: "#ccc", height: "16px", lineHeight: "16px" }}>2000kWh</p>
            </div>
          </div>
          <div style={{ marginLeft: "10px" }}>
            60%
          </div>
        </div>
        <div style={{ textAlign: "right" }}>
          2019-09-09-09
        </div>
      </div>
    )
  }
}
